/* 堤围信息 弹框
* @ 劳兆城 
* @ 2017-08-12*/

<template>
	<interact-model 
		ref="interact-model"
		title="堤围信息"
		class="banks-model">
		<div class="banks-warpper">
			<div class="banks-table">
				<table class="table" border>
					<tbody>
						<tr>
							<td>堤名</td>
							<td>{{fliterData('dike_name')}}</td>
							<td>镇(街)</td>
							<td>{{fliterData('town')}}</td>
						</tr>
						<tr>
							<td>村居</td>
							<td>{{fliterData('village')}}</td>
							<td>捍卫面积(万亩)</td>
							<td>{{fliterData('area')}}</td>
						</tr>
						<tr>
							<td>堤长</td>
							<td>{{fliterData('dike_length')}}</td>
							<td>堤高</td>
							<td>{{fliterData('dike_height')}}</td>
						</tr>
					</tbody>
				</table>
			</div>			
		</div>
		<loading v-show="showLoading"></loading>
	</interact-model>
</template>

<script>
	import {
		loadingMixin,
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'
import { ERR_OK } from 'api/config'
 	import { getBanksInfo } from 'api/aPicture'

export default {
		mixins: [
			loadingMixin,
			interactModelMixin,
			aPictureModelMixin
		],
		data () {
			return {
				showLoading: false
			}
		},
		methods: {
			show (feature) {
				this.$refs['interact-model'].showModel()
			this._getInfo(feature.get('name'))
		},
			_getInfo (name) {
				this.showLoading = true
			getBanksInfo(name).then(res => {
					for (var key in res) {
						if (res[key].code === ERR_OK && res[key].result.length) {
							Object.assign(this.data, res[key].result[0])
					}
					}
					this.showLoading = false
			})
			}
		}
	}
</script>

<style lang="scss">
	.banks-model {
		width: 450px;
		height: 300px;
		.banks-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 5px;
			.banks-table {
				width: 100%;
				height: 100%;
				.table {
					width: 100%;
					font-size: 14px;
					border: 1px solid #ddd;
					td {
						width: 25%;
						padding: 5px;
					}
				}
			}
		}
	}
</style>